<template>
	<view class="largeCard">
		<image :src="largeCard.backgroundImage.url"></image>
		<view class="info">
			<view class="priceTitle">
				<view class="titles">{{largeCard.productName}}</view>
				<view class="price">￥{{largeCard.price.text}}</view>
				
			</view>
			<view class="btn"> 
				{{largeCard.buttonText.text}}
			</view>
		</view>
	</view>
</template>

<script setup>
 const {largeCard}  = defineProps({
	 "largeCard":{type:Object,default(){return({})}}
 })
</script>

<style lang="scss" scoped>
	.largeCard{
		padding: 20rpx;
		position: relative;
		image{
			width: 710rpx;
			height: 710rpx;
			border-radius: 12rpx;
		}
		.info{
			position: absolute;
			width:710rpx;
			left:10rpx;
			bottom: 50rpx;
			color:#fff;
			display: flex;;
			padding: 30rpx;
			justify-content: space-between;
			box-sizing: border-box;
		}
		.price{
			font-size: 20rpx;
		}
		.btn{
			color:#333;
			background-color: #fff;
			display: inline-block;
			padding: 0 30rpx;
			height: 64rpx;
			line-height: 64rpx;
			border-radius: 64rpx;
		}
		
	}
</style>